<template>
  <div class="login-container">
    <a-form :label-col="labelCol" :wrapper-col="wrapperCol" ref="formRef" :model="info" :rules="rules" class="form-box">
      <a-form-item name="userName">
        <a-input v-model:value="info.userName" placeholder="请输入账号">
          <template #prefix>
            <user-outlined type="user" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item name="password">
        <a-input v-model:value="info.password" type="password" placeholder="请输入密码" @keyup.enter="onSubmit">
          <template #prefix>
            <lock-outlined />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 4, offset: 10 }">
        <a-button :loading="loading" type="primary" @click.prevent="onSubmit">LOGIN</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from "vue";
import { useRouter } from "vue-router";
import { ValidateErrorEntity } from "ant-design-vue/es/form/interface";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { loginState } from "@/interface/login";
import { message } from "ant-design-vue";

export default defineComponent({
  setup() {
    const router = useRouter();
    const formRef = ref();
    const state = reactive<loginState>({
      info: {
        userName: "",
        password: "",
      },
      rules: {
        userName: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      loading: false,
    });

    const onSubmit = () => {
      formRef.value
        .validate()
        .then(async () => {
          try {
            state.loading = true;
            setTimeout(() => {
              state.loading = false;
              sessionStorage.setItem("token", "123456789");
              router.push("/home/index");
              message.success("登陆成功");
            }, 1000);
          } catch (error) {}
        })
        .catch((error: ValidateErrorEntity<loginState>) => {
          console.log("error", error);
        });
    };
    return {
      ...toRefs(state),
      labelCol: { span: 0 },
      wrapperCol: { span: 24 },
      onSubmit,
      formRef,
    };
  },
  components: {
    UserOutlined,
    LockOutlined,
  },
});
</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../../assets/bg.jpg") no-repeat;
  background-size: 100% 100%;
  .form-box {
    width: 350px;
    background-color: rgba($color: #f8f8f8, $alpha: 0.4);
    padding: 30px 20px 0;
    border-radius: 5px;
  }
}
</style>
